import React, { Component } from 'react'
import { Icon,Modal } from 'antd-mobile';
import './cartList.scss'
import {connect} from 'react-redux'

const alert = Modal.alert;
class CartList extends Component {
  state = {
    arr:[],
    oncheack:true
  }
  componentDidMount(){
    console.log(this.props)
    let dataCart = JSON.parse(localStorage.getItem('carts'))
    if(dataCart){
      this.setState({
        arr:dataCart
      })
    }
    this.chack()
    if(this.props.mapStort){
     let n = dataCart.map(v=>{
        v.checked = this.props.mapStort
      })
      this.setState({
        arr:n
      })
    }
      
  }
  chack= (params) => {
    this.state.arr.map(v=>{
      if(!v.checked){
        if(!this.state.oncheack){
          this.setState({
            oncheack:false
          })
        }
        this.props.Imbibitions(false)
      }else{
        if(!this.state.oncheack){
          this.setState({
            oncheack:true
          },)
        }
        this.props.Imbibitions(true)
      }
    })
    
   
  }
  
  
  addcalculation=(index)=>{
    this.calculation(index,1)
 }
  subcalculation=(index)=>{
    this.calculation(index,-1)
}
calculation(index,symbolNum){
  let data = this.state.arr
  if(symbolNum==1){
      data[index].goodsNum++
  }else{
      data[index].goodsNum--
  }
  if(data[index].goodsNum<=0){
    // data[index].num = 1
    //删除弹窗
    alert('删除商品', '你确定要删除吗?', [
            { text: '取消', onPress: () => {
                    data[index].goodsNum = 1
                    this.cartServe(data)
                } 
            },
            { text: '删除', onPress: () =>{
                data.splice(index,1)
                this.cartServe(data)
            }},
        ])

    }else{
        this.cartServe(data)
    }
      
      
    }
  // 保存数据
  cartServe(obj){
  
    localStorage.setItem('carts',JSON.stringify( obj))
    this.setState({
      arr:obj
    })
  }

  // 
  checkedClick =(index) => {
    let arra = this.state.arr
    arra[index].checked=!arra[index].checked
    this.cartServe(arra)
    this.chack()
  }
  render(){
    return(
      <div>
    {/* 商品列表 */ }
    < div className = 'shopplist' >
  
      {this.state.arr.length != 0 ? this.state.arr.map((v, index) => {
        {/* 单个商品 */ }
        return (<div className='shoppItme' key={index}>
          <div className='cheack' onClick={this.checkedClick.bind(this,index)}>
  
            {v.checked ? <Icon type='check-circle' color='red' /> : <i className="checkbox"></i>}
          </div>
          {/* 内容 */}
          <div className='shoppbox'>
            {/* 左边图片 */}
            <div className='shoppimg'>
              <img src={v.imgUrl} alt="" />
            </div>
            {/* 右边文本 */}
            <div className='right-title'>
              <div className='crat-name'>
                <div>
                {v.title}
                </div>
              </div>
              <div className='crat-ks'>{v.goodscolour}</div>
              <div className='leixing'>
                <div>
                  {v.goodsstyle}
                </div>
              </div>
  
              {/* 价格 */}
              <div className='Price'>
                <span className='xjiage'>￥{v.OriginalPrice}</span>
                <span className='yuanjia'>￥{v.FavorablePrice}</span>
                {/* 加和减 */}
                <div className='calculationbox' >
                  <div className='add gonton' onClick={this.addcalculation.bind(this,index)
                  }>+</div>
                  <div className='dataNum gonton'>{v.goodsNum}</div>
                  <div className='sub gonton' onClick={this.subcalculation.bind(this,index)
                  }>-</div>
                </div>
              </div>
            </div>
          </div>
        </div>)
  
  
      })
        : <h1 style={{textAlign:'center'}}>购物车空空如也</h1>}
  
        </div >
      </div >
    );
  }
}
const mapStort = (state)=>{
  return {
    mapStort:state.cartReducer.mapStort,
    // qunxuan:state.cartReducer.quanx
  }
}
const mapdefid = (deft)=>{
  return{
    Imbibitions: (bool) => {
        // 点击休闲触发
        let action = {
            type: 'IMBIBITION',
            payload: bool
        }
    
        deft(action)
    }
  }
}
export default connect(mapStort,mapdefid)(CartList)
